<template>
  <div class="dashboard-container">
    <!-- <img :src="img1"> -->
    <!-- <div class="dashboard-text">
      
    </div> -->

    <el-row class="dashboard-card-wrap" :gutter="20" style="margin-left: 0px;margin-right: 0px;">
      <el-col :span="6">
        <div class="dashboard-card-item card1">
          <p class="number"><strong>5</strong></p>
          <p class="line2">设备数</p>
          <p class="line2">管理设备</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashboard-card-item card2">
          <p class="number"><strong>24</strong></p>
          <p class="line2">数据点数</p>
          <p class="line2">管理数据点</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashboard-card-item card3">
          <p class="number"><strong>0</strong></p>
          <p class="line2">触发器</p>
          <p class="line2">管理触发器</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashboard-card-item card4">
          <p class="number"><strong>1</strong></p>
          <p class="line2">用户数</p>
          <p class="line2">创建用户数</p>
        </div>
      </el-col>
    </el-row>

    <!-- 农业设备状态列表 -->
    <div class="content-table-wrap">
      <div class="content-tools-wrap hidden">
        <div class="tools-left f-l">
          <h2 style="font-size: 18px;color: #333;">农场设备状态列表</h2>
        </div>
      </div>

      <el-table
        v-if="data"
        size="small"
        :data="data"
        style="width: 100%"
        :header-cell-style="{background:'#aeaeae',color:'#ffffff'}"
      >
        
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="150">
        </el-table-column>

        <el-table-column
          fixed
          prop="number"
          label="设备编号"
          width="150">
        </el-table-column>

        <el-table-column
          prop="online"
          label="在线状态"
          width="200">
        </el-table-column>

        <el-table-column
          prop="name"
          label="设备名称"
          width="200">
        </el-table-column>

        <el-table-column
          prop="acquisitionTime"
          label="采集时间"
          width="200">
        </el-table-column>

        <el-table-column
          prop="data"
          label="数据"
          width="300">
        </el-table-column>

      </el-table> 
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return{
      img1:require("@/assets/dingNiu/illustration/kafa.png"),
      line:require("@/assets/farm/images/home1.png"),
      data:[
        {
          id:"334995096",
          number:"73F15233E6F3",
          online:1,
          name:"山东师范农场采集设备2",
          acquisitionTime:"2019-12-19 16:34:49",
          data:'18 ℃ | 36.4 %RH | 3767.9 ℃ | 16.3 %RH ',
        },
        {
          id:"334995096",
          number:"73F15233E6F3",
          online:1,
          name:"山东师范农场采集设备2",
          acquisitionTime:"2019-12-19 16:34:49",
          data:'18 ℃ | 36.4 %RH | 3767.9 ℃ | 16.3 %RH ',
        },
        {
          id:"334995096",
          number:"73F15233E6F3",
          online:1,
          name:"山东师范农场采集设备2",
          acquisitionTime:"2019-12-19 16:34:49",
          data:'18 ℃ | 36.4 %RH | 3767.9 ℃ | 16.3 %RH ',
        }
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    text-align: center;
    padding:20px 10px;
    img{
      margin-top: 100px;
      width: 40%;
    }
  }
  &-card-wrap{
    margin-bottom: 30px;
    .dashboard-card-item{
      padding: 10px 15px;
      text-align: left;
      color: #ffffff;
      .number{
        margin-top: 40px;
        margin-bottom: 20px;
        font-size: 50px;
      }
      &.card1{
        background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);
      }
      &.card2{
        background-image: linear-gradient( 135deg, #EE9AE5 10%, #5961F9 100%);
      }
      &.card3{
        background-image: linear-gradient( 135deg, #C2FFD8 10%, #465EFB 100%);
      }
      &.card4{
        background-image: linear-gradient( 135deg, #FFF886 10%, #F072B6 100%);
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}


</style>
